<html>
    <head>
        <title>通过属性(Prop)向组件传递数据</title>
    </head>
    <body>
        <script>
                /*
                    在前端中， prop、property 和 attribute 经常会被弄混。 

                    property:  JavaScript 对象的属性
                    attribute: DOM元素的属性，是标签的特性，比如：id、class、style、src、href等。
                    
                    组件的prop，是你"在自定义组件上定义"的"自定义attribute"，在使用时是反应在组件标签上的。
                    （你在声明组件的时候用js代码声明了组件的prop，然后使用的时候给组件的标签上与prop对应的attribute赋值，然后）
                */

                // 四、通过 prop 向子组件传递数据
                              /*
                                    早些时候，我们提到了创建一个博文组件的事情。
                                    问题是如果你不能向这个组件传递一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。
                                    这也是prop的由来。
                                    
                                    属性(Prop)是你可以在组件上注册的一些自定义属性。

                                    当一个值传递给prop对应的attribute的时候，它就变成了组件实例的一个property属性。
                                    (当你在模板里给组件的atrribute传入值的时候，它就变成了组件vue实例对象的一个属性)
                                    
                              */
                               
                              // 为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop列表中：
                                     
                                    Vue.component('blog-post',{
                                                    props:['title'],
                                                    template:'<h3>{{titile}}</h3>'
                                    });

                              /*
                                  一个组件默认可以拥有任意数量的　prop, 任何值都可以传递给任何 prop.

                                  在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
                              */

                              // 一个 prop 被注册之后，你就可以像这样吧数据作为一个自定义 attribute 传递进来
                                          /*
                                                <blog-post title="My journey with Vue"></blog-post>
                                                <blog-post title="Blogging with Vue"></blog-post>
                                                <blog-post title="Why Vue is so fun"></blog-post>
                                          */

                                // 然而在一个典型的应用中，你可能在data里有一个博文的数组：
                                         new Vue({
                                            el:'#blog-post-demo',
                                            data:{
                                                 posts:[
                                                    {
                                                      id:1,title:'My journey with Vue'
                                                    },
                                                    {
                                                      id:2,title:'Blogging with Vue'
                                                    },
                                                    {
                                                      id:3,title:'Why Vue is so fun'
                                                    }
                                                 ]
                                            }

                                         });

                                // 并想为每篇文章渲染一个组件：

                                          /*
                                                <blog-post
                                                  v-for="post in posts"
                                                  v-bind:key="post.id"
                                                  v-bind:title="post.title"
                                                ></blog-post>
                                          */

                                          /*
                                              如上所述，你会发现我们可以使用 v-bind 来动态传递 prop  。
                                              这在你一开始不清楚要渲染的具体内容，比如"从一个API获取博文列表"的时候，是非常游泳呢的。
                                          */
        </script>
    </body>
</html>